<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/uploadify/uploadify.css" />
</head>
<body>

<input id="file_upload" name="uploadfile" type="file" multiple="true">
<p id="upload_check"></p>
<div id="queue"></div>
<div id="show"></div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#file_upload").uploadify({
            'swf' : '/uploadify/uploadify.swf',//调用的swf文件的位置
            'uploader' : '/image/upload',//指定文件上传后调用的方法
            'method' : "post",
            'buttonText' : '选择图片上传',//上传按钮的显示文本
            'fileTypeExts' : '*.jpg;*.jpeg;*.gif;*.png;*.bmp;*.JPG;*.JPEG;*.GIF; *.PNG;*.BMP',//可上传的文件类型
            'fileTypeDesc' : '只允许上传jpg,jpeg,gif,png,bmp文件。',//文件类型错误时的提示
            'queueSizeLimit' : 1,//批量上传队列的大型，这里设为1即一次只可以上传一个文件
            'fileSizeLimit' : 1024 * 1024 * 10,//上传文件的大小上限
            'removeCompleted' : true,
            'auto' : true,
            'multi' : false,
            'queueID' : 'queue',//上传队列上传进度的现实位置id
            'onSelect' : function() {
                $("#queue").children().each(function() {
                    $(this).css({
                        margin : '7px',
                        width : '70%'
                    });
                });
            },
            'onUploadSuccess' : function(file, data,response) {//上传成功后的回调函数
                $("#show").empty();
                var json = $.parseJSON(data);
                if (json.flag) {
                    var $img = $('<img id="target"/>');
                    $img.attr("src", "img/" + json.fileName);
                    $("#show").append($img);
                }
                else {
                    $("#upload_check").text(json.msg);
                    $("#upload_check").show();
                    setTimeout('$("#upload_check").hide()',
                        5000);
                }
            }
        });

    });
</script>

</body>
</html>